<extend name="Base/common"/>

<block name="body">

    <style>

        .header select{border: 0;}

        #chose,li input{display: none;}

        #index .header input#search{margin-left: 50px;}

        #index .header div img{margin-left: 70px;}

    </style>



    <!-- <select name="pid" style="width: 95px;">

        <option value="">全部省市</option>

        <volist name="areas" id="v">

        <option value="{$v.id}" <eq name="Think.get.area_pid" value="$v.id"> selected="selected" </eq> >{$v.title}</option>

        </volist>

    </select>

    <select name="area_id" style="width: 95px;">

        <option value="">全部地区</option>

    </select> -->

    <!-- 地区 -->

    <div id="diqu" style="display: none">

        <header><a href="javascript:;" class="back"><img src="__IMG__/images/back_03.png"/></a>地区选择 <a href="javascript:;" class="sure">确认</a></header>

        <div id="area">

            <div class="chose list1" style="display: none">

                <p><strong class="f-fl dangqian"></strong></p>

                <ul id="area_list">



                </ul>

            </div>

            <div class="AToZ">

                <ul>

                    <li class="jia">全部</li>

                    <volist name="areas" id="v">

                        <li name="pid" area_pid="{$v.id}" data-title="{$v.title}">{$v.title}</li>

                    </volist>

                </ul>



            </div>



        </div>

    </div>

    <script type="text/javascript">

        $(function () {





            //聚焦导航搜索 最底部消失

            $('#search').focus(function () {

                $('.LinkB').hide();

                $('.Fix').hide();

            });

            $('#search').blur(function () {

                $('.LinkB').show();

                $('.Fix').show();

            });

        })

        $('.jia').click(function () {

            $('.list1').hide();

            $('.jia').css('background', '#f6ce78');

            $('li[name=pid]').css('background', '#FFF');

            $('.sure').click(function () {

                users('0', '0', '0', '0', '0', '', '', '', '', '', '-1');

            });

        });

        $('li[name=pid]').click(function () {

            var v = $(this).attr('area_pid');

            var a = $(this).attr('data-title');

            $('.list1').show();

            $('.dangqian').html("当前:" + a);

            $('li[name=pid]').css('background', '#FFF');

            $(this).css('background', '#f6ce78');

            $('.jia').css('background', '#FFF');

            $.ajax({

                url: '{:U('area / areaList')}',

                type: 'POST',

                dataType: 'json',

                data: {id: v},

                success: function (data) {

                    var content = "<li class='' area_id=''>全城</li>";

                    $.each(data, function (name, value) {

                        content += "<li area_id='" + value.id + "'>" + value.title + "</li>"

                    });

                    content += "<div class='clear'></div>";

                    $('#area_list').html("");

                    $('#area_list').append(content);

                }

            })

        });



        $('li[name=pid]').click(function () {

            $(document).scrollTop(0);

            var va = $(this).attr('area_pid');

            $('#area_list').on('click', 'li', function () {

                var vs = $(this).attr('area_id');

                $('#area_list').find('li').removeClass('moren');

                $(this).addClass('moren');

                $('.sure').click(function () {

                    users('0', '0', '0', '0', '0', va, vs, '', '', '', '-1');

                });

            });

            $('.sure').click(function () {

                users('0', '0', '0', '0', '0', va, '', '', '', '', '-1');

            });

        });

    </script>

    <!-- 地区 -->

    <!-- 筛选 -->

    <div id="chose">

        <header><a href="javascript:;" class="back"><img src="__IMG__/images/back_03.png"/></a>筛选 <a href="javascript:;" class="sure">确认</a></header>

        <div class="chose">

            <p>性别</p>

            <ul>

                <li>不限<input type="radio" name="sex" value="" <eq name="Think.get.sex" value=""> checked="checked" </eq> /></li>

                <li>男<input type="radio" name="sex" value="1" <eq name="Think.get.sex" value="1"> checked="checked" </eq> /></li>

                <li>女<input type="radio" name="sex" value="2" <eq name="Think.get.sex" value="2"> checked="checked" </eq> /></li>

            </ul>

            <p>年龄</p>

            <ul>

                <li>不限<input type="radio" name="age" value="" <eq name="Think.get.age" value=""> checked="checked" </eq> /></li>

                <li>18~22<input type="radio" name="age" value="18,22" <eq name="Think.get.age" value="18,22"> checked="checked" </eq> /></li>

                <li>23~26<input type="radio" name="age" value="23,26" <eq name="Think.get.age" value="23,26"> checked="checked" </eq> /></li>

                <li>27~30<input type="radio" name="age" value="27,30" <eq name="Think.get.age" value="27,30"> checked="checked" </eq> /></li>

                <li>31~35<input type="radio" name="age" value="31,35" <eq name="Think.get.age" value="31,35"> checked="checked" </eq> /></li>

                <li>36~40<input type="radio" name="age" value="36,40" <eq name="Think.get.age" value="36,40"> checked="checked" </eq> /></li>

                <li>40以上<input type="radio" name="age" value="40" <eq name="Think.get.age" value="40"> checked="checked" </eq> /></li>

            </ul>

            <p>身份</p>

            <ul>

                <li class="">

                    全部

                    <input type="radio" name="identity" value="" <eq name="Think.get.identity" value=""> checked="checked" </eq> />

                </li>

                <volist name="identity" id="v">

                    <li class="">

                        {$v.title}

                        <input type="radio" name="identity" value="{$v.value}" <eq name="Think.get.identity" value="$v.value"> checked="checked" </eq> />

                    </li>

                </volist>

            </ul>

        </div>

    </div>

    <!-- 筛选 -->





    <!--首页-->

    <div id="index">

        <div class="header">

            <a href="javascript:;" class="where"><img src="__IMG__/images/IDX_03.png"/><if condition="$_GET['area_pid']">{$_GET['area_pid']|getArea=###}<else/>全部</if></a>

            <div class="search">

                <!-- <select name="choose" style="width:68px;-webkit-appearance:none;margin-left:25px;">

                        <option value="c" selected="selected" style="font-size: 20px">课程</option>

                        <option value="n"style="font-size: 20px" >昵称</option>

                </select> -->

                <!-- <input type="text" id="search" value="" /> -->

                <input type="text" id="search" name="search" value="<neq name="Think.get.keywords" value="">{$Think.get.keywords|mb_substr=###,0,-1,'UTF8'}</neq>" flag="c" placeholder="搜索"/>

                <img src="__IMG__/images/areaSearch_06.png"/>

            </div>

            <a href="javascript:;" class="more"><img src="__IMG__/images/IDX_05.png"/></a>

        </div>

        <div class="indexList">

            <ul class="chosebox">

                <volist name="labels" id="v">

                    <li class="">

                        {$v.title}

                        <input type="radio" name="lab" value="{$v.value}" style="" <eq name="Think.get.label" value="$v.value"> checked="checked" </eq> />

                    </li>

                </volist>

                <li class="BO_UL">排序 <img src="__IMG__/images/indexjt_10.jpg"/>

                    <ul id="rule">

                        <li <eq name="$_GET" value="null">style="background:#f6ce78"</eq>><a href="{:U('UserMember/userlist')}">查看所有</a></li>

                        <li <eq name="Think.get.star" value="1">style="background:#f6ce78"</eq>><a name="eva">评价从高到低</a></li>

                        <li <eq name="Think.get.addtime" value="1">style="background:#f6ce78"</eq>><a name="addtime">最新发布时间</a></li>

                        <li <eq name="Think.get.salary" value="1">style="background:#f6ce78"</eq>><a name="salary">价格从低到高</a></li>

                    </ul>

                </li>

            </ul>

            <style>

                /*.IndexList li{height:800px;}*/

            </style>

            <div class="IndexList">

                <ul class="like block" style="background: #faf8f8">

                    <volist name="users" id="v">

                        <li class="class-date">

                            <div class="per">

                                <a href="__CONTROLLER__/userDetail/uid/{$v.id}/teaching/{$Think.get.teaching}"  class="f-fl">

                                    <img src="__ROOT__{$v.logo|getimg=###}"/>

                                </a>

                                <div class="f-fl div-class">

                                    <h1>{$v.nickname}<img src="__IMG__/images/<switch name='v.sex'><case value='1'>nan_03</case><case value='2'>girl_03</case></switch>.png"/>

                                        <span>{$v.minsalary}元/小时</span>

                                        <gt name="v.vip_endtime" value="$datetime"><img src="__IMG__/images/perV_06.png"/></gt>

                                    </h1>

                                    <p class="moren">

                                        <img src="__IMG__/images/idxe_18.jpg"/>

                                        <switch name="Think.get.teaching">

                                    <case value="1">想学</case>

                                    <case value="2">技能</case> 

                                    </switch>:

                                    <volist name="v.courses" id="c">

                                        <span class="class-span">{$c}&emsp;</span>

                                    </volist>

                                    </p>

                                    <eq name="Think.get.teaching" value="2"><p style="height: 35px"><img src="__IMG__/images/idxe_24.jpg"/> 教过: {$v.id|teached=###}</p></eq>

                                    <p style="height: 35px"><img src="__IMG__/images/idxe_27.jpg"/> 位置:<span class="class-span" style="margin-left:4px">{$v.area_id|getParentArea=###}{$v.area_id|getArea=###}</span></p>

                                    <eq name="v.passed" value="1"><img src="__IMG__/images/idxe_21.jpg"/ class="posi"></eq>

                                </div>

                                <div class="clear"></div>

                            </div>

                            <p class="chat">

                                <img class="img-width" src="__IMG__/images/idxe2_18.jpg"/>{$v.inaword}

                                <hr />

                            </p>

                            <div class="clear"></div>

                        </li>

                    </volist>

                </ul>

                <!--<input type="button" class="jzgd" value="加载更多">-->



            </div>

        </div>

        <style>

            .jzgd{display:block;border:none;outline:none;background:#4ea3fd;color:#fff;border-radius:5px;width:98%;font-size:22px;margin:10px 1%;padding:11px 0;letter-spacing:4px;}

        </style>

        <img src="__IMG__/images/personLInk_02.jpg" class="Fix"/>

        <p class="LinkB">

        <if condition="$_GET['teaching'] eq 2">

            <!--老师-->

            <a href="{:U('UserMember/userList',array('teaching' =>2))}" style="background:url(__IMG__/images/personLinkb_02.jpg) no-repeat;background-position-x:0px;opacity:1;"></a>

            <!--学生-->

            <a href="{:U('UserMember/userList',array('teaching' =>1))}" style="background:url(__IMG__/images/personLinkb_02.jpg) no-repeat;background-position-x:-247px;"></a>

            <elseif condition="$_GET['teaching'] eq 1"/>

            <!--老师-->

            <a href="{:U('UserMember/userList',array('teaching' =>2))}" style="background:url(__IMG__/images/personLinkb_02.jpg) no-repeat;background-position-x:0px;"></a>

            <!--学生-->

            <a href="{:U('UserMember/userList',array('teaching' =>1))}" style="background:url(__IMG__/images/personLinkb_02.jpg) no-repeat;background-position-x:-247px;opacity:1;"></a>

        </if>

        <!--个人-->



        <a href="{:U('Index/index')}"  style="background:url(__IMG__/images/personLinkb_02.jpg) no-repeat;background-position-x:-493px;"></a>

        <neq name="num" value="0"><span class="perNum" id="perNewOther" style="position: absolute;left: 640px;top: 5px;">{$num}</span></neq>

        <!-- <a href="{:U('UserMember/login')}"  style="background:url(__IMG__/images/personLinkb_02.jpg) no-repeat;background-position-x:-493px;"></a> -->



        </p>

    </div>

<script type="text/javascript">
  onload =function(){
  //判断访问终端
  var browser={
       versions:function(){
           var u = navigator.userAgent, app = navigator.appVersion;
           return {
               trident: u.indexOf('Trident') > -1, //IE内核
               presto: u.indexOf('Presto') > -1, //opera内核
               webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
               gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
               mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
               ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
               android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
               iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
               iPad: u.indexOf('iPad') > -1, //是否iPad
               webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
               weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
               qq: u.match(/\sQQ/i) == " qq" //是否QQ
           };
       }(),
       language:(navigator.browserLanguage || navigator.language).toLowerCase()
    };
    var divWidth=document.querySelector("#index");
    if(browser.versions.android){
     divWidth.style.marginBottom="4.5rem";
      }
    if(browser.versions.ios){
     divWidth.style.paddingBottom="4.5rem";
    } 
  } 
 </script>

    <script>

          var tur = true;

            window.onscroll = function (){

                if(tur){
                    setTimeout(scro,800); 
                    tur = false; //杀死变量
                }else{

                }

            };

            //需要执行的函数

            function scro(){

            var i = $('.class-date').size();

             var num = "{$nums}";

//             alert(num);

             var totalheight = $(window).height() + $(window).scrollTop();

             var aa = $(document).height();

//             console.log(totalheight);

//             console.log(aa);exit();


            if ($(document).height() - totalheight < 5 && num > i) {

                layer.msg('加载中', {

                     icon: 16

                     ,shade: 0.001,

                     time: 150

                  }, function(){   

                var teaching = "{$_GET['teaching']}";

                var label = "{$_GET['label']}";

                var sex = "{$_GET['sex']}";

                var age = "{$_GET['age']}";

                var identity = "{$_GET['identity']}";

                var area_pid = "{$_GET['area_pid']}";

                var area_cid = "{$_GET['area_cid']}";

                var star = "{$_GET['star']}";

                var addtime = "{$_GET['addtime']}";

                var salary = "{$_GET['salary']}";

                var keywords = "{$_GET['keywords']}";

                var limit = i;               

                $.ajax({

//                     cache: false,

                    async: false,   // 太关键了，学习了，同步和异步的参数

                    url: "{:U('userList')}",

                    type: 'POST',

                    dataType: 'html',

                    data: {teaching: teaching, label: label, sex: sex, age: age, identity: identity, area_pid: area_pid, area_cid: area_cid, star: star, addtime: addtime, salary: salary, keywords: keywords, limit: limit},

                    success: function (data) {

                        data = $.parseJSON(data);



                        $.each(data, function (n, v) {

                            if (v.sex == 1) {

                                var ss = "nan_03";

                            } else {

                                var ss = "girl_03";

                            }

                            if (v.teaching == 1) {

                                var aa = "想学: ";

                                var aa2 = '';

                            } else {

                                var aa = "技能: ";

                                var aa2 = "<p style='height:35px'><img src='__IMG__/images/idxe_24.jpg'/>教过: " + v.jiaoguo+"</p>";

                            }

                            if (v.passed == 1) {

                                var passed = "<img src='__IMG__/images/idxe_21.jpg'/ class='posi'>";

                            } else {

                                var passed = '';

                            }

                            if (v.inaword != '') {

                                var mm = v.inaword;

                            } else {

                                var mm = '';

                            }

                            var timestamp = "{$datetime}";

                            if (v.vip_endtime > timestamp) {

                                var endtime = "<img src='__IMG__/images/perV_06.png'/>";

                            } else {

                                var endtime = "";

                            }

                            var str = "<li class='class-date'><div class='per'><a href='__CONTROLLER__/userDetail/uid/" + v.id + "/teaching/" + v.teaching + "' class='f-fl'><img src='__ROOT__" + v.logos + "'/></a><div class='f-fl div-class'><h1>" + v.nickname + "<img src='__IMG__/images/" + ss + ".png'/><span>" + v.minsalary + "元/小时</span>" + endtime + "</h1><p class='moren'><img src='__IMG__/images/idxe_18.jpg'/>" + aa + v.kecheng + "</p>" + aa2 + "<p style='height:35px'><img src='__IMG__/images/idxe_27.jpg'/>位置:" + v.sheng + v.shi + "</p>" + passed + "</div><div class='clear'></div></div><p class='chat'><img class='img-width' src='__IMG__/images/idxe2_18.jpg'/>" + mm + "</p><div class='clear'></div></li>";

                            $('.block').append(str);
                           // setTimeout(function(){},1000);
                        });
                            layer.close(index);
                    }

                })

             });

            }
                tur = true;//复活变量
            };

//        $(window).scroll(function () {

            // setTimeout(function(){},1000);



//        });

 
         // 默认选中

        if ('{$Think.get.label}' == '') {

            var v = $('input[name=lab]:first').val();

            users('0', v, '0', '0', '0', '0', '0', '', '', '', '-1');

        }

        $(function () {

            var num = "{$nums}";

            var i = $('.class-date').size();

            if (num == i) {

                $('.jzgd').css('display', 'none');

            }

        });

        $('.like').on('click', '.per', function () {

            var i = $('.class-date').size();

            var url = $(this).find('a').attr('href');

            url = url + "/linum/" + i;

            location.href = url;

        })

        /* 结果筛选 */

        $('input[name=lab]').change(function () {

            var v = $(this).val();

            users('0', v, '0', '0', '0', '0', '0', '', '', '', '-1');

        });

        $('a[name=eva]').click(function () {

            var v = 1;

            users('0', '0', '0', '0', '0', '0', '0', v, '', '', '-1');

        });

        $('a[name=addtime]').click(function () {

            var v = 1;

            users('0', '0', '0', '0', '0', '0', '0', '', v, '', '-1');

        });

        $('a[name=salary]').click(function () {

            var v = 1;

            users('0', '0', '0', '0', '0', '0', '0', '', '', v, '-1');

        });

        $('input[name=search]').blur(function () {

            var v = $(this).val() + $(this).attr('flag');
            users('0', '0', '0', '0', '0', '0', '0', '', '', '', v);

        });

        function users(teaching, lab, sex, age, identity, area_pid, area_cid, star, addtime, salary, keywords) {

            if (teaching == '0') {

                teaching = "{$Think.get.teaching}";

            }

            if (lab == '0') {

                lab = "{$Think.get.label}";

            }

            if (sex == '0') {

                sex = "{$Think.get.sex}";

            }

            if (age == '0') {

                age = "{$Think.get.age}";

            }

//            if (age == '0') {

//                age = "{$Think.get.age}";

//            }

            if (identity == '0') {

                identity = "{$Think.get.identity}";

            }

            if (area_pid == '0') {

                area_pid = "{$Think.get.area_pid}";

            }

            if (area_cid == '0') {

                area_cid = "{$Think.get.area_cid}";

            } else if (area_cid == '-1') {

                area_cid = '';

            }

            if (star == '' && addtime == '' && salary == '') {

                star = "{$Think.get.star}";

            }

            if (star == '' && addtime == '' && salary == '') {

                addtime = "{$Think.get.addtime}";

            }

            if (star == '' && addtime == '' && salary == '') {

                salary = "{$Think.get.salary}";

            }

            if (keywords == '-1') {

                keywords = "{$Think.get.keywords}";

            }

            //带参数跳转

            location.href = "__ACTION__" + "/teaching/" + teaching + "/label/" + lab + "/sex/" + sex + "/age/" + age + "/identity/" + identity + "/area_pid/" + area_pid + "/area_cid/" + area_cid + "/star/" + star + "/addtime/" + addtime + "/salary/" + salary + "/keywords/" + keywords;

//        alert(location.href);

    

        }

        /* 结果筛选结束 */



        //地区联动

        var id = '{$Think.get.area_pid}';

        if (id != '') {

            $.post('__MODULE__/Area/areaList', {'id': id}, function (res) {

                $.each(res, function (index, el) {

                    $('select[name=area_id').append('<option value=\'' + el.id + '\'>' + el.title + '</option>');

                });

            });

        }



        //切换搜索方式

        // $('select[name=choose]').change(function(){

        // 	var val = $(this).val();

        // 	def(val);

        // });



        //默认选中搜索方式

        // var k = '{$Think.get.keywords|mb_substr=###,-1,1,'UTF8'}';

        // if (k != '') {

        // 	$('select[name=choose]').val(k);

        // 	def(k);

        // } else {

        // 	def('c');

        // }



        // function def(val){

        // 	var msg = (val == 'c' ? '请输入课程名称' : '请输入用户昵称');

        // 	$('input[name=search]').attr('flag',val).attr('placeholder',msg);

        // }



        //筛选分类标签，设置隐藏的checkbox选中

        $('.chosebox li').click(function () {

            $(this).find('input').attr('checked', true).trigger('change');

        });



        //显示筛选页

        $('.header .more').click(function () {

            $('#chose').show(300);

            $('#index').hide(300);

        });

        $('.chosebox li:last').trigger('click');

        //隐藏筛选页

        $('.back').click(function () {

            $('#chose').hide(300);

            $('#index').show(300);

        });

        //地区显示

        $('.back').click(function () {

            $('#diqu').hide(300);

            $('#index').show(300);

        });

        //地区隐藏

        $('.header .where').click(function () {

            $('#diqu').show(300);

            $('#index').hide(300);

        });

        //筛选页标签变色效果

        $('.chose li').click(function () {

            $(this).siblings('li').removeClass('moren');

            $(this).addClass('moren').find('input').attr('checked', true);

        })



        //选择完成

        $('.sure').click(function () {

            $('#chose').hide(300);

            $('#index').show(300);

            var sex = $('input[name=sex]:checked').val();

            var age = $('input[name=age]:checked').val();

            var identity = $('input[name=identity]:checked').val();

            users('0', '0', sex, age, identity, '0', '0', '', '', '', '-1');

        });

        //选项卡默认样式

        $('input[type=radio]:checked').parent().addClass('moren');



    </script>

</block>